<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #F5F5F5;
				text-align: center;
			}
			a{
				text-decoration: none;
			}
			:focus {
			    outline: none;
			}
			#bigbox{
				width: 850px;
				height: 620px;
				background-color: white;
				margin: auto auto;
				position: relative;
				top: 100px;
			}
			#erweima{
				width: 50px;
				height: 50px;
				background: url(img/二维码灰.png);
				position: relative;
				left: 790px;
				top: 10px;
				/* margin: auto auto; */
			}
			#erweima:hover{
				background: url(img/二维码黑.png);
			}
			.p1{
				font-size: 30px;
				position: relative;
				top: 40px;
			}
			.logo{
				width: 50px;
				height: 50px;
				background-color: #FF6700;
				border-radius: 5%;
				margin: auto auto;
				position: relative;
				top: 10px;
			}
			.accout{
				width: 358px;
				height: 50px;
				border: 1px solid #E0E0E0;
				margin: auto auto;
				position: relative;
				top: 80px;
			}
			#accout{
				border: transparent;
				width: 340px;
				height: 30px;
				font-size: 14px;
				/* border: 1px solid #000; */
				margin: 10px 5px;
			}
			.passwrod{
				width: 358px;
				height: 50px;
				border: 1px solid #E0E0E0;
				margin: auto auto;
				position: relative;
				top: 90px;
			}
			#passwrod{
				border: transparent;
				width: 340px;
				height: 30px;
				font-size: 14px;
				/* border: 1px solid #000; */
				margin: 10px 5px;
			}
			#submit{
				width: 360px;
				height: 47px;
				position: relative;
				top: 110px;
				background-color: #FF6700;
				color: white;
				line-height: 47px;
				font-size: 14px;
				margin: auto auto;
			}
			.zhuce{
				width: 360px;
				height: 48px;
				position: relative;
				/* border: 1px solid #000; */
				top: 110px;
				display: inline-block;
				font-size: 14px;
			}
			
			.zhuce_left{
				float: left;
				line-height: 48px;
			}
			.zhuce_left a{
				color: #FF6700;
			}
			.zhuce_left a:hover{
				color: #FF6700;
			}
			.zhuce_right{
				float: right;
				line-height: 48px;
			}
			.zhuce_right a{
				color: #757575;
			}
			.zhuce_right a:hover{
				color: #FF6700;
			}
			.qita{
				width: 350px;
				height: 40px;
				margin: auto auto;
				position: relative;
				top: 120px;
				line-height: 40px;
				color: #B0B0B0;
				font-size: 14px;
			}
			.hr_left{
				width: 133px;
				float: left;
				margin: 20px 0 0 0;
				background-color:#E0E0E0;
				height:1px;
				border:none;
			}
			.hr_right{
				width: 133px;
				float: right;
				margin: 20px 0 0 0;
				background-color:#E0E0E0;
				height:1px;
				border:none;
			}
			.qita_dengru{
				width: 350px;
				height: 50px;
				/* border: 1px solid #000; */
				margin: auto auto;
				position: relative;
				top: 120px;
			}
			.qita_dengru img{
				width: 30px;
				height: 30px;
				margin: 10px 10px;
			}
			.dibu{
				width: 600px;
				height: 60px;
				/* border: 1px solid #000; */
				color: #757575;
				font-size: 14px;
			}
			.dibu_nav li{
				list-style: none;
				display: inline-block;
				margin: 5px 10px;
				/* color: #C2B0B7; */
			}
			.dibu{
				margin: auto auto;
				position: relative;
				top: 220px;
				line-height: 20px;
			}
			.dibu_nav_dwon li{
				list-style: none;
				display: inline-block;
				margin: 5px 10px;
				/* color: #C2B0B7; */
			}
			
		</style>
	</head>
	<body>
		<div id="bigbox">
			<div id="erweima"></div>
			<div class="logo">
				<img src="http://s02.mifile.cn/assets/static/image/mi-logo.png" >
			</div>
			<p class="p1">小米账号登录</p>
			<div class="accout" >
				<input type="text" id="accout" placeholder="邮箱/手机号码/小米ID"/>
			</div>
			<div class="passwrod" >
				<input type="password" id="passwrod" placeholder="密码"/>
			</div>
			<div id="submit">登录</div>
			<div class="zhuce">
				<div class="zhuce_left"><a href="#">手机短信登录/注册</a></div>
				<div class="zhuce_right"><a href="注册界面.html">立即注册</a><span> | </span><a href="#">忘记密码？</a></div>
			</div>
			<div class="qita">
				<hr class="hr_left">其他方式登录<hr class="hr_right">
			</div>
			<div class="qita_dengru">
				<img src="img/QQ.png" ><img src="img/weibo.png" ><img src="img/支付宝.png" ><img src="img/微信.png" >
			</div>
		</div>
		<div class="dibu">
			<nav class="dibu_nav">
				<li style="color: #333333;font-size: 14px;">简体</li><span>|</span><li>繁体</li><span>|</span><li>English</li><span>|</span><li>常见问题</li><span>|</span><li>隐私政策</li>
			</nav>
			<nav class="dibu_nav_dwon">
				<li>小米公司版权所有-京ICP备10046444-<img src="https://account.xiaomi.com/static/res/9204d06/account-static/respassport/acc-2014/img/ghs.png" >京公网安备11010802020134号-京ICP证110507号</li>
			</nav>
		</div>
		
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#submit").on("click",function(){
					var account_val = $("#accout").val();
					var pass_val = $("#passwrod").val();
					
					if(account_val==""){
						$(".accout").css("border-color","#FF6700");
						alert("请输入用户名");
						$("#accout").on("input",function(){
							$(".accout").css("border-color","#E0E0E0");
						});
					}else{
						if(pass_val==""){
							$(".passwrod").css("border-color","#FF6700");
							alert("密码不能为空");
							$("#passwrod").on("input",function(){
								$(".passwrod").css("border-color","#E0E0E0");
							});
						};
					};
				});
				
			});
		</script>
	</body>
</html>
